.page-box {
    padding: 0 0 100rpx 0;
    .logo {
        height: 74rpx;
        padding: 0 32rpx;
        background-color: #1226aa;
        image {
            width: 188rpx;
            height: 54rpx;
        }
    }
    .header {
        padding: 14rpx 32rpx 0 32rpx;
        background: linear-gradient(180deg, #1226aa 50%, #ebeef5 100%);
        .search {
            padding: 0 40rpx;
            height: 66rpx;
            background: #ffffff;
            border-radius: 33rpx;
            width: 100%;
            .uni-input {
                width: 80%;
                font-size: 22rpx;
            }
            .iconfont {
                font-size: 32rpx;
                color: #1226aa;
            }
        }
        .slide {
            margin-top: 24rpx;
            width: 686rpx;
            height: 280rpx;
            border-radius: 20rpx;
            image {
                width: 686rpx;
                height: 280rpx;
                border-radius: 20rpx;
            }
        }
    }
    .nav {
        margin-top: 24rpx;
        margin-bottom: 44rpx;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20rpx;
        padding: 0 32rpx;
        justify-items: center;
        .box {
            width: 156rpx;
            height: 144rpx;
            background: #ffffff;
            border-radius: 20rpx;
            image {
                width: 64rpx;
                height: 64rpx;
            }
            .text {
                margin-top: 12rpx;
                font-size: 20rpx;
                color: #6e767a;
            }
        }
    }
    .article {
        padding: 0 32rpx;
        margin-bottom: 44rpx;
        .title {
            position: relative;
            font-size: 32rpx;
            color: #2e3233;
            font-weight: bold;
            z-index: 1;
            &::after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 60rpx;
                height: 16rpx;
                background: linear-gradient(90deg, #7887ea 0%, #ffffff 100%);
                border-radius: 8rpx;
                content: '';
                z-index: -1;
            }
        }
        .platform-data {
            margin-top: 14rpx;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 19rpx;
            .box {
                width: 333rpx;
                height: 100rpx;
                border-radius: 20rpx;
                border: 1rpx solid #ffffff;
                padding: 0 20rpx 0 24rpx;
                .t1 {
                    font-size: 24rpx;
                    color: #2e3233;
                }
                .t2 {
                    font-size: 44rpx;
                    color: #1226aa;
                    font-weight: bold;
                    margin-right: 10rpx;
                }
                .t3 {
                    font-size: 20rpx;
                    color: #6e767a;
                }
            }
        }
        .knowledge-planet {
            margin-top: 14rpx;
            border-radius: 20rpx;
            border: 1rpx solid #ffffff;
            .box {
                padding: 24rpx 0;
                margin: 0 24rpx;
                &:first-child {
                    border-bottom: 1px solid rgba(19, 151, 197, 0.3);
                }
                .article-title {
                    font-size: 26rpx;
                    color: #2e3233;
                    font-weight: bold;
                    line-height: 37rpx;
                    margin-bottom: 12rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                }
                .article-content {
                    font-size: 20rpx;
                    color: #6e767a;
                    line-height: 28rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                }
            }
        }
        .celebrity-big-shot {
            margin-top: 14px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20rpx;
            .box {
                width: 210rpx;
                height: 257rpx;
                background: linear-gradient(180deg, #e5eaf7 0%, #ffffff 100%);
                border-radius: 20rpx;
                border: 1rpx solid #ffffff;
                .pic {
                    width: 122rpx;
                    height: 122rpx;
                    border: 2px solid #fff;
                    border-radius: 50%;
                    overflow: hidden;
                    image {
                        width: 122rpx;
                        height: 122rpx;
                        border-radius: 50%;
                    }
                }
                .t1 {
                    margin-top: 25rpx;
                    font-size: 26rpx;
                    color: #2e3233;
                    font-weight: bold;
                    line-height: 37rpx;
                    margin-bottom: 2rpx;
                }
                .t2 {
                    line-height: 28rpx;
                    font-size: 20rpx;
                    color: #6e767a;
                }
            }
        }
    }
}
